// cover some element-plus styles
:root {
  // 覆盖element-plus
  --el-color-primary: var(--app-color-base); // 无法使用color(base)
  --el-text-color-primary: var(--app-color-white);
  --el-svg-monochrome-grey: #8cfaf9;
  --el-mask-color: rgb(1 12 47 / 70%);
}

// .el-loading-mask {
//   background-color: rgb(1 12 47 / 70%) !important;
// }

.el-empty {
  --el-empty-padding: size(20) 0 !important;
  --el-empty-image-width: 35% !important;
  --el-empty-description-margin-top: size(20) !important;
  --el-empty-fill-color-1: #cff7ff !important;
  --el-empty-fill-color-2: #29bdf3 !important;
  --el-empty-fill-color-3: rgb(23 55 110 / 0%) !important;
  --el-empty-fill-color-4: #22daff !important;
  --el-empty-fill-color-5: #2cc7ff !important;
  --el-empty-fill-color-6: #22daff !important;
  --el-empty-fill-color-7: #0058af !important;
  --el-empty-fill-color-8: #22a4ed !important;
  --el-empty-fill-color-9: #1869ab !important;

  &__description p {
    color: color(blue) !important;
    font-size: size(12) !important;
  }

  &__image {
    opacity: 0.85;
  }
}

.el-tag--dark {
  --el-tag-bg-color: #0095ff;
}

.el-tag--dark.el-tag--success {
  --el-tag-bg-color: #59c72e;
}

// 自定义面包屑
.custom-breadcrumb-style {
  .el-breadcrumb {
    display: flex;
    align-items: center;
  }

  .el-breadcrumb__item {
    font-size: size(16);
    color: color(white);

    .el-icon {
      font-size: size(20);
    }

    &:last-child {
      .el-breadcrumb__inner {
        color: color(yellow);

        &:hover {
          color: color(white);
        }
      }
    }
  }

  .el-breadcrumb__inner.is-link {
    display: flex;
    align-items: center;
    color: color(white);

    &:hover {
      color: color(blue);
    }
  }

  .el-breadcrumb__separator {
    color: color(white);
  }

  .el-breadcrumb__inner.is-link,
  .el-breadcrumb__inner a {
    font-weight: normal;
  }
}

.el-tag {
  height: size(24) !important;
}

.custom-tabs-style {
  .el-tabs__nav {
    float: inherit !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #18265b;
  }

  .el-tabs__item {
    color: var(--app-color-white) !important;
  }

  .el-tabs__item:hover {
    color: var(--app-color-blue) !important;
  }

  .el-tabs__active-bar {
    background-color: var(--app-color-blue) !important;
  }

  .el-tabs__item.is-active {
    color: var(--app-color-blue) !important;
  }
  .el-tabs__header{
    margin: 0;
  }
}